import ReactDOM from 'react-dom'
import { useState, memo, useCallback } from 'react'

/**
 * 这里使用了callBack来记忆一个函数，这个方法有两个参数
 * 第一个参数是需要记忆的回调函数，
 * 第二个参数是这回调函数依赖的数据
 * 只要这个数据改变了，组件就会更新，反之不会更新
 * 如果没有依赖项，也需要传入一个空数组
 * 这是表示组件只会在初始化的时候更新一下
 * 然后就会一直默认这个函数没有改变，组件就不会跟着更新
 */
type ChildProps = {
  click: () => void
}
const Child = memo(({ click }: ChildProps) => {
  console.log('child组件更新')
  return (
    <div style={{ backgroundColor: 'skyblue', padding: 5 }}>
      子组件：<button onClick={click}>点击</button>
    </div>
  )
})
type Child2Props = {
  user: { age: number }
}
const Child2 = memo(({ user }: Child2Props) => {
  console.log('Child2 组件更新')
  return (
    <div style={{ backgroundColor: '#abc', padding: 5 }}>
      子组件2 - 年龄： {user.age}
    </div>
  )
})

const App = () => {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('pink')
  // const handleClick = useCallback(() => {
  //   console.log('你点击了子组件的按钮')
  // }, [])
  // 有依赖项
  const handleClick = useCallback(() => {
    console.log('你点击了子组件的按钮')
    setCount(count + 10)
  }, [count])
  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>

      <h1>计数器：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />

      {/* 子组件 */}
      <Child click={handleClick} />
      <br />
      <Child2 user={{ age: 18 }} />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
